import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile";
import { withRouter } from "react-router-dom";
import { getProdcutList } from "../../data/api";
import "./SearchCenter.scss";
class SearchCenter extends Component {
  timeId = null;
  /* 防抖 */
  debounce = (fn, timeout) => {
    if(this.timeId){
      clearTimeout(this.timeId);
      this.timeId = null;
    }
    this.timeId = setTimeout(fn,timeout);
  };
  state = {
    productList: [
      //   {
      //     goods_id: 56059,
      //     goods_name:
      //       "Tata/他她2017冬黑色羊皮绒面水钻皮带扣通勤粗高跟女皮靴7322DDD7",
      //   },
      //   {
      //     goods_id: 56059,
      //     goods_name:
      //       "Tata/他她2017冬黑色羊皮绒面水钻皮带扣通勤粗高跟女皮靴7322DDD7",
      //   },
    ],
  };

  handleChange = async (value) => {
    this.debounce(async ()=>{
      let res = await getProdcutList({ query: value });
      // console.log(res);
      this.setState(() => {
        return {
          productList: res.message || [], // res.message === null  null||[]
        };
      });
    },500)
  };
  // 跳转产品详情页面
  handleClick = (goods_id) => {
    this.props.history.push("goodDetail?goods_id=" + goods_id);
  };
  handleSearch = (params) => {
    console.log("点击搜索的方法");
  }
  
  render() {
    return (
      <div>
        <NavBar
          onLeftClick={() => this.props.history.go(-1)}
          icon={<Icon type="left" />}
        >
          搜索中心
        </NavBar>
        <SearchBar placeholder="搜索产品" 
        cancelText="搜索"
        onCancel={this.handleSearch}
        onChange={this.handleChange} />
        {/* 产品列表的开始 */}
        <div className="scProductList">
          {this.state.productList.map((v) => {
            return (
              <div
                className="productListItem"
                key={v.goods_id}
                onClick={this.handleClick.bind(this, v.goods_id)}
              >
                <span className="text">{v.goods_name}</span>
              </div>
            );
          })}
        </div>
        {/* 产品列表的结束 */}
      </div>
    );
  }
}
export default withRouter(SearchCenter);
